<template>
    <div>
        <!--页面title-->
        <mainTitleText>
            <span slot="account" class="account">楼盘管理</span>
            <span slot="accountEnglish">REAL ESTATE MANAGEMENT</span>
        </mainTitleText>
        <!--添加-->
        <div
                class="add houses-add layui-anim"
                :form="form"
                v-show="isShowAdd"
                :class="{'layui-anim-scale':isShowAdd}"
                lay-filter="form">
            <i class="layui-icon layui-icon-close" @click="isShowAdd=false"></i>
            <form class="layui-form form1">
              <div class="layui-form-item">
                  <label style="height: 110px;" class="layui-form-label">代&nbsp;&nbsp;&nbsp;&nbsp;理：</label>
                  <div class="layui-inline" v-for="item in values.point">
                      <label class="layui-form-label" :style="item.style">{{item.post}}：</label>
                      <div class="layui-input-inline" style="">
                          <input
                                  style="border:none;border-bottom:1px solid #e6e6e6;width: 100px;"
                                  class="layui-input"
                                  lay-verify="required"
                                  required
                                  :name="item.inputName"
                                  type="tel"
                                  v-if=""
                                  :value="item.name"
                                  maxlength="5"
                                  autocomplete="off">

                      </div>
                      <div class="layui-select-inline">
                          <select
                                  v-if="item.sign"
                                  v-model="item.sign"
                                  :name="item.selectName"
                                  lay-filter="sel">
                              <option value="0">%</option>
                              <option value="1">元</option>
                          </select>
                          <select
                                  v-else
                                  :name="item.selectName"
                                  lay-filter="sel">
                              <option value="0" selected="selected">%</option>
                              <option value="1">元</option>
                          </select>
                      </div>
                  </div>
                  <button class="layui-btn" type="button" lay-submit lay-filter="formDemoPane1">确认</button>
              </div>
            </form>
            <form class="layui-form form2">
              <div class="layui-form-item">
                  <label class="layui-form-label">渠&nbsp;&nbsp;&nbsp;&nbsp;道：</label>
                  <div class="layui-inline" style="" v-for="item in values.one">
                      <label class="layui-form-label">{{item.channel}}：</label>
                      <div class="layui-input-inline" style="">
                          <input
                                  style="border:none;border-bottom:1px solid #e6e6e6;width: 100px;"
                                  class="layui-input"
                                  lay-verify="required"
                                  required
                                  :value="item.name"
                                  :name="item.inputName"
                                  type="tel"
                                  maxlength="5"
                                  autocomplete="off">
                      </div>
                      <div class="layui-select-inline">
                          <select
                                  v-if="item.sign"
                                  v-model="item.sign"
                                  :name="item.selectName"
                                  lay-filter="sel">
                              <option value="0">%</option>
                              <option value="1">元</option>
                          </select>
                          <select
                                  v-else
                                  :name="item.selectName"
                                  lay-filter="sel">
                              <option value="0" selected="selected">%</option>
                              <option value="1">元</option>
                          </select>
                      </div>
                  </div>
                  <button class="layui-btn" type="button" lay-submit lay-filter="formDemoPane2">确认</button>
              </div>
            </form>
            <form class="layui-form form3">
              <div class="layui-form-item">
                  <label class="layui-form-label">全&nbsp;&nbsp;&nbsp;&nbsp;民：</label>
                  <div class="layui-inline" style="" v-for="item in values.two">
                      <label class="layui-form-label">{{item.point}}：</label>
                      <div class="layui-input-inline" style="">
                          <input
                                  style="border:none;border-bottom:1px solid #e6e6e6;width: 100px;"
                                  class="layui-input"
                                  lay-verify="required"
                                  required
                                  :value="item.name"
                                  :name="item.inputName"
                                  type="tel"
                                  maxlength="5"
                                  autocomplete="off">
                      </div>
                      <div class="layui-select-inline">
                          <select
                                  v-if="item.sign"
                                  v-model="item.sign"
                                  :name="item.selectName"
                                  lay-filter="sel">
                              <option value="0">%</option>
                              <option value="1">元</option>
                          </select>
                          <select
                                  v-else
                                  :name="item.selectName"
                                  lay-filter="sel">
                              <option value="0" selected="selected">%</option>
                              <option value="1">元</option>
                          </select>
                      </div>
                  </div>
                  <button class="layui-btn" type="button" lay-submit lay-filter="formDemoPane3">确认</button>
              </div>
            </form>
            <form class="layui-form form4">
              <div class="layui-form-item">
                  <label class="layui-form-label">转&nbsp;&nbsp;&nbsp;&nbsp;介：</label>
                  <div class="layui-inline" style="" v-for="item in values.three">
                      <label class="layui-form-label">{{item.referral}}：</label>
                      <div class="layui-input-inline" style="">
                          <input
                                  style="border:none;border-bottom:1px solid #e6e6e6;width: 100px;"
                                  class="layui-input"
                                  lay-verify="required"
                                  required
                                  :name="item.inputName"
                                  :value="item.name"
                                  type="tel"
                                  maxlength="5"
                                  autocomplete="off">
                      </div>
                      <div class="layui-select-inline">
                          <select
                                  v-if="item.sign"
                                  v-model="item.sign"
                                  :name="item.selectName"
                                  lay-filter="sel">
                              <option value="0">%</option>
                              <option value="1">元</option>
                          </select>
                          <select
                                  v-else
                                  :name="item.selectName"
                                  lay-filter="sel">
                              <option value="0" selected="selected">%</option>
                              <option value="1">元</option>
                          </select>
                      </div>
                  </div>
                  <button class="layui-btn" type="button" lay-submit lay-filter="formDemoPane4">确认</button>
              </div>
            </form>
        </div>
        <div class="main">
            <!--搜索-->
            <div class="search">
                <span>共找到{{count}}个账号</span>
                <form action="" class="layui-form layui-form-pane form1">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input
                                    type="text"
                                    name="text"
                                    required=""
                                    v-model="search"
                                    onkeydown="if(event.keyCode==13)return false;"
                                    @keyup.enter="searchPush"
                                    lay-verify="required"
                                    placeholder="请输入关键字"
                                    autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" @click="searchPush">
                            <i></i>
                        </label>
                    </div>
                </form>
            </div>
            <div>
                <table id="table"
                       :formTable="formTable"
                       lay-filter='text'
                       style="width: 100%!important;"></table>
            </div>
            <script type="text/html" id="barDemo">
                  <a class="layui-btn layui-btn-xs" style="background-color:#cd1f5c " lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                   <!--<a class="layui-btn layui-btn-xs" style="background-color: #999" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>-->
            </script>
        </div>
    </div>
</template>
<script>
    import $ from 'jquery'
    import mainTitleText from '@/components/module/mainTitleText'
    export default {
        name: "houses",
        props:['urls'],
        data(){
            return {
                count:'',
                search:'',//搜索key值
                pointAll:{
                    "agency":[
                        {"post":"项\n目\n总","inputName":"xm","selectName":"xmUnit",style:'letter-spacing:1px'},
                        {"post":"销售经理","inputName":"sell","selectName":"sellUnit"},
                        {"post":"内场顾问","inputName":"counselor","selectName":"counselorUnit"},
                        {"post":"部门经理","inputName":"section","selectName":"sectionUnit"},
                        {"post":"外场顾问","inputName":"outField","selectName":"outFieldUnit"},
                        {"post":"渠道经理","inputName":"channel","selectName":"channelUnit"},
                        {"post":"自拓经理","inputName":"extend","selectName":"extendUnit"},
                        {"post":"推广经理","inputName":"generalize","selectName":"generalizeUnit"},
                        // {"post":"渠道公司","inputName":"company","selectName":"companyUnit"},
                        {"post":"客服自拓","inputName":"service","selectName":"serviceUnit"},
                        {"post":"客服推广","inputName":"serviceGeneralize","selectName":"serviceGeneralizeUnit"},
                        ],
                    "channel":[
                        {"channel":"一级渠道","inputName":"one","selectName":"oneUnit"},
                        {"channel":"二级渠道","inputName":"two","selectName":"twoUnit"},
                    ],
                    "allPeople":[
                        {"point":"上线点位","inputName":"top","selectName":"topUnit"},
                        {"point":"下线点位","inputName":"bottom","selectName":"bottomUnit"},
                    ],
                    "referral":[
                        {"referral":"一级转介","inputName":"one","selectName":"oneUnit"},
                    ]
                },
                isShowAdd:false,
                values:{},
                search:'',
                sub:false,
                sub1:false,
                sub2:false,
                sub3:false,
                post:''
            }
        },
        components:{
            mainTitleText:mainTitleText
        },
        computed:{
            form(){//添加
                var _this = this;
                var url = this.urls.houses.inserts;
                layui.use(['form','jquery'], function () {
                    var form = layui.form;
                    form.on('select(sel)',function(data){
                        if(data.value ==='0'){
                            _this.sub = true;
                            _this.sub1 = true;
                            _this.sub2 = true;
                            _this.sub3 = true;
                           var k = data.elem.name.slice(0,-4);
                           $("input[name="+k+"]").attr('maxlength',5);
                           $("input[name="+k+"]").attr('val',$("input[name="+k+"]").val().slice(0,2))
                        }else{
                            var k = data.elem.name.slice(0,-4);
                            $("input[name="+k+"]").attr('maxlength',8);
                            _this.sub = false;
                            _this.sub1 = false;
                            _this.sub2 = false;
                            _this.sub3 = false;
                        }
                    });
                    form.on('submit(formDemoPane1)',function(data){//添加成功，重载数据表
                        data.field.name = 1;
                        data.field.building_id = _this.values.building_id;
                        var k=[],b=[];
                       for(let x in data.field){
                            if(x.slice(-4) === 'Unit'){
                                if(data.field[x] ==0){
                                    b.push(x);
                                    if(data.field[x.slice(0,-4)] >=100){
                                        _this.sub = true;
                                         $('input[name='+x.slice(0,-4)+']').css('borderColor','red');
                                          layer.msg('该值不可大于100', {icon: 5,anim: 6});
                                    }else{
                                        k.push(x);
                                        if(k.length>b.length-1){
                                            _this.sub = false;
                                            $('input').css('borderColor','#d2d2d2');
                                        }
                                    }

                                }
                            }
                        }
                        if(_this.sub === false){
                            $.post(url,data.field,function(res){
                                layer.msg(res.message);
                                layui.use(['table'], function () {
                                    var table = layui.table;
                                    table.reload('idTest',{});
                                })
                            })
                        }

                    });
                    form.on('submit(formDemoPane2)',function(data){//添加成功，重载数据表
                        data.field.name = 2;
                        data.field.building_id = _this.values.building_id;
                        var k=[],b=[];
                        for(let x in data.field){
                            if(x.slice(-4) === 'Unit'){
                                // console.log(data.field['oneUnit']);
                                if(data.field['oneUnit']===data.field['twoUnit']){
                                    if((Number(data.field['two']) > Number(data.field['one']))&& Number(data.field['one']) !==0){
                                        _this.sub1 = true;
                                        layer.msg('二级必须小于一级', {icon: 5,anim: 6});
                                    }else{
                                        if((data.field[x] ==='0') || (data.field['oneUnit']=== '0'&& data.field['twoUnit']=== '0')){
                                            b.push(x);
                                            if(data.field[x.slice(0,-4)] >=100){
                                                _this.sub1 = true;
                                                $('input[name='+x.slice(0,-4)+']').css('borderColor','red');
                                                layer.msg('该值不可大于100', {icon: 5,anim: 6});
                                            }else{
                                                k.push(x);
                                                if(k.length>b.length-1){
                                                    _this.sub1 = false;
                                                    $('input').css('borderColor','#d2d2d2');
                                                }
                                            }
                                        }else{
                                            if(data.field['oneUnit']=== '1'&& data.field['twoUnit']=== '1'){
                                                _this.sub1 = false;
                                            }
                                        }
                                    }
                                }else{
                                    if(data.field[x] ==='0'){
                                        b.push(x);
                                        if(data.field[x.slice(0,-4)] >=100){
                                            _this.sub1 = true;
                                            $('input[name='+x.slice(0,-4)+']').css('borderColor','red');
                                            layer.msg('该值不可大于100', {icon: 5,anim: 6});
                                        }else{
                                            k.push(x);
                                            if(k.length>b.length-1){
                                                _this.sub1 = false;
                                                $('input').css('borderColor','#d2d2d2');
                                            }
                                        }
                                    }
                                }

                            }
                        }
                        if(_this.sub1 === false){
                            $.post(url,data.field,function(res){
                                layer.msg(res.message);
                                layui.use(['table'], function () {
                                    var table = layui.table;
                                    table.reload('idTest',{});
                                })
                            })
                        }
                    });
                    form.on('submit(formDemoPane3)',function(data){//添加成功，重载数据表
                        data.field.name = 3;
                        data.field.building_id = _this.values.building_id;
                        var k=[],b=[];
                        for(let x in data.field){
                            if(x.slice(-4) === 'Unit'){
                                if(data.field[x] ==='0'){
                                    b.push(x);
                                    if(data.field[x.slice(0,-4)] >=100){
                                        _this.sub2 = true;
                                        $('input[name='+x.slice(0,-4)+']').css('borderColor','red');
                                        layer.msg('该值不可大于100', {icon: 5,anim: 6});
                                    }else{
                                        k.push(x);
                                        if(k.length>b.length-1){
                                            _this.sub2 = false;
                                            $('input').css('borderColor','#d2d2d2');
                                        }
                                    }
                                }
                            }
                        }
                        if(_this.sub2 === false){
                            $.post(url,data.field,function(res){
                                layer.msg(res.message);
                                layui.use(['table'], function () {
                                    var table = layui.table;
                                    table.reload('idTest',{});
                                })
                            })
                        }

                    });
                    form.on('submit(formDemoPane4)',function(data){//添加成功，重载数据表
                        data.field.name = 4;
                        data.field.building_id = _this.values.building_id;
                        var k=[],b=[];
                        for(let x in data.field){
                            if(x.slice(-4) === 'Unit'){
                                if(data.field[x] ==='0'){
                                    b.push(x);
                                    if(data.field[x.slice(0,-4)] >=100){
                                        _this.sub3 = true;
                                        $('.form4 input[name='+x.slice(0,-4)+']').css('borderColor','red');
                                        layer.msg('该值不可大于100', {icon: 5,anim: 6});
                                    }else{
                                        k.push(x);
                                        if(k.length>b.length-1){
                                            _this.sub3 = false;
                                            $('input').css('borderColor','#d2d2d2');
                                        }
                                    }
                                }
                            }
                        }
                        if(_this.sub3 === false){
                            $.post(url,data.field,function(res){
                                layer.msg(res.message);
                                layui.use(['table'], function () {
                                    var table = layui.table;
                                    table.reload('idTest',{});
                                })
                            })
                        }

                    });
                    form.verify({
                        required:function(a,b){
                           if(a ===''){
                               return '必填项不能为空'
                           }
                        }
                    });
                });
            },
            formTable() {
                var _this = this,
                    url=_this.urls.houses.list;
                layui.use(['table','form','jquery'], function () {
                    var table = layui.table;
                    var form = layui.form;
                    var $ = layui.jquery;
                    //实例
                    _this.$nextTick(function() {
                        table.render({
                            elem: '#table'
                            , id: 'idTest'
                            , height: '491'
                            , limit: 10
                            , url: url //数据接口
                            , page: {theme: '#cd1f5c'} //开启分页
                            , cols: [[ //表头
                                {field: 'numbers', title: '序号', type: 'numbers', width: 80}
                                , {field: 'name', title: '楼盘名',}
                                , {field: 'company', title: '所属公司',}
                                , {field: 'address', title: '地址信息',}
                                // , {field: 'distribute', title: '分销总'}
                                , {title: '操作', align: 'center', toolbar: '#barDemo', fixed: 'right'} //这里的toolbar值是模板元素的选择器}
                            ]]
                            , done: function (res, curr, count) {//渲染完成回调，获取总条目数。
                                _this.count = count;
                            }
                        });
                    })
                    //监听工具条事件
                    table.on('tool(text)', function (obj) {
                        var data = obj.data //获得当前行数据
                            , layEvent = obj.event; //获得 lay-event 对应的值
                        if (layEvent === 'del') {
                            layer.confirm('您确定要删除吗？', function (index) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                //向服务端发送删除指令
                                $.ajax({
                                    type:'GET',
                                    url:_this.urls.table.del,
                                    data:{id:data.id},
                                    success:function(res){
                                        layer.msg(res.message)
                                    }
                                })
                            });
                        }else if(layEvent === 'edit'){
                            $.extend(true,data.point,_this.pointAll.agency);//对象合并
                            $.extend(true,data.one,_this.pointAll.channel);//对象合并
                            $.extend(true,data.two,_this.pointAll.allPeople);//对象合并
                            $.extend(true,data.three,_this.pointAll.referral);//对象合并
                            _this.values.building_id = data.id;
                            _this.values.point = data.point;
                            _this.values.one = data.one;
                            _this.values.two = data.two;
                            _this.values.three = data.three;
                             _this.isShowAdd = false;
                            _this.isShowAdd = true;
                            _this.$nextTick(function(){
                                form.render();
                                // for(let x in data.point){
                                //     if(data.point[x].sign ===0){
                                //         let k=data.point[x].inputName;
                                //         $("input[name="+k+"]").attr('maxlength',5)
                                //     }else{
                                //         let k=data.point[x].inputName;
                                //         $("input[name="+k+"]").attr('maxlength',8)
                                //     }
                                // }
                            })
                        }
                    });
                });
            }
        },
        methods: {
            searchPush(){//search 获取查询数据 重载表格
                var key = this.search,
                    url = this.urls.houses.list;
                layui.use(['table'], function () {//搜索直接更新表格数据
                    var table = layui.table;
                    table.reload('idTest', {
                        url: url,
                        where:{
                            key:key
                        }
                    });
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../static/css/style.less";
    .add {
        width: 100%;
        padding-top: 20px;
       display: inline-block;
        .pr;
        .layui-form-item{
            /*margin-bottom: 15px;*/
        .layui-inline{
            border: 1px solid #e6e6e6;
            background: #fff;
            margin-bottom: 10px;
            .layui-input{
                width: 50px!important;
                height: 25px;
                margin-top: 7.5px;
                padding:0;

            }
            .layui-input-inline{
                width: 50px;
                margin-right: 0;
            }
            .layui-select-inline{
                width: 45px;
                display: inline-block;
            }
        }
        label{
            line-height: 40px;
        }
        .layui-btn {
            width: 80px !important;
            height: 40px;
            .pr;
            top: 1px;
            .br(3px);
            .blg(to right, #cd1f5c, #e11e27);
            margin-bottom: 15px;
            vertical-align: top;
        }
        }
        >i{
            .pa;
            right: 10px;
            top: 0px;
            cursor: pointer;
        }
    }
    .main {
        background-color: @cf;
        padding: 20px;
        .bs(0 0 5px #ccc);
        margin-top: 20px;
        .search {
            width: 100%;
            height: 40px;
            line-height: 30px;
            padding: 5px 20px;
            background-color: #ededed;
            > span, > .form1 {
                .fl;
            }
            > .form1 {
                .fr;
                .layui-form-item {
                    .pr;
                    .layui-input-block {
                        width: 220px;
                        height: 30px !important;
                        margin: 0 38px 0 0;
                        input {
                            height: 30px !important;
                            .br(2px 0 0 2px);
                        }
                    }
                    label {
                        width: 40px;
                        height: 30px;
                        .pa;
                        top: 0;
                        right: 0;
                        .br(0 2px 2px 0);
                        cursor: pointer;
                        .blg(to right, #cd1f5c, #e11e27);
                        i {
                            width: 15px;
                            height: 15px;
                            display: inline-block;
                            .pa;
                            .cm;
                            .bud("../../static/images/search.svg", center center, 100% 100%);
                        }
                    }
                }
            }

        }

    }

</style>